<template>
  <div class="header_box">
    <v-leftPanel />
    <ul>
      <li class="li_l">
        <f7-button  panel-open="left">
          <svg-icon iconClass="list_left_icon_white" v-if="getThemeDark" />
          <svg-icon iconClass="list_left_icon" v-else />
        </f7-button>
      </li>
      <li class="li_m">
        <p class="search_box">
          <svg-icon iconClass="search_icon_white" v-if="getThemeDark" />
          <svg-icon iconClass="search_icon" v-else />
          <input
            type="text"
            placeholder="输入歌名以搜索"
            @focus="enterSearchPage()"
          />
        </p>
      </li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import LeftPanel from '@/components/leftpanel.vue';
import {mapGetters} from 'vuex';
export default {
  components:{
    'v-leftPanel':LeftPanel,
  },
  computed:{
    ...mapGetters({
      getThemeDark:'getThemeDark'
    })
  },
  methods:{
    enterSearchPage(){
      // window.azBridge.testBridge({param:'abaaba'})
      console.log('enter SearchPage');
      this.$f7router.navigate('/search/');
    }
  }
}
</script>

<style lang="scss" scoped>
.header_box {
  position: relative;
  ul {
    height: 0.4rem;
    line-height: 6vh;
    display: flex;
    justify-content: space-between;
    padding-left:0;
    margin:0.1rem 0;
    .li_l{
      display: flex;
      align-items: center;
      width:12vw;
      .svg-icon{
        width:0.3rem;
        height:0.3rem;
      }
      .button{
        display:flex;
        align-items: center;
      }
    }
    .li_m{
      
      display:flex;
      align-items:center;
      p{
        margin:0 4vw 0 0;
        width:80vw;
      }
    }
  }
  .search_box {
    height: 0.3rem;
    border: 1px #ccc solid;
    border-radius: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input{
      border: none;
      flex: 1;
    }
    .svg-icon{
      margin: 0 0.1rem;
      width:0.15rem;
      height:0.15rem;
    }
  }
}
</style>
